<template>
  <div class="strut-div">
    <div id="gov-pie" class="strut-div" style="width:280px;float: left;"></div>
    <div class="strut-div" style="width: 180px;float: left;margin-top: 4px;text-align: left;">
      <ul>
        <li>新增案件<span>88</span><i>件</i></li>
        <li>办结案件<span>76</span><i>件</i></li>
        <li>预警案件<span>20</span><i>件</i></li>
        <li>超期案件<span>4</span><i>件</i></li>
        <li>已发问讯<span>3</span><i>件</i></li>
      </ul>
    </div>
  </div>
</template>

<script>
  import echarts from 'echarts';

  export default {
    name: "GovPieChart",
    props: ['config'],
    data() {
      return {
        chart: null,
      }
    },
    methods: {
      initChart() {
        let option = {
          // backgroundColor: '#fff',
          color: ['#1E558E', '#0D699A', '#0E759D', '#10919F', '#0F9683'],
          tooltip: {
            trigger: 'item',
            formatter: "{b} : {c}"
          },
          graphic: [{//2、中心的文字设置
            type: 'group',
            left: 'center',
            top: 'center',
            children: [
              {
                type: 'circle',
                z: 100,
                left: 'center',
                top: '20',
                shape: {
                  cx: 0,
                  cy: 0,
                  r: 8,
                },
                style: {
                  fill: '#B3BEC8',
                  stroke: '#91AFBF',
                  lineWidth: 2,
                  // shadowBlur: 8,
                  // shadowOffsetX: 3,
                  // shadowOffsetY: 3,
                  // shadowColor: 'white'
                }
              },
              {
                type: 'text',
                z: 100,
                left: 'center',
                top: 'middle',
                style: {
                  x: 3,
                  y: 10,
                  fill: '#333',
                  // text: [
                  //   '班级人数',
                  //   data1+data2+'人',
                  // ].join('\n'),
                  font: 'bolder 1em "Microsoft YaHei", sans-serif',
                  textAlign: 'center',//3、居中显示
                }
              }
            ]
          }],
          series: [
            {
              name: '',
              type: 'pie',
              radius: [8, 50],
              center: ['50%', '60%'],
              roseType: 'radius',
              width: '55%',       // for funnel
              max: 20,
              borderColor: '#fff',//1、背景色和饼图块色一致，则能解决块之间间距问题
              borderWidth: 20,
              opacity: 1,// for funnel
              itemStyle: {

                normal: {
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  }
                },
                emphasis: {
                  label: {
                    show: true
                  },
                  labelLine: {
                    show: true
                  }
                }
              },
              data: []
            }
          ]
        };
        console.log(this.chart);
        setTimeout(() => {
          // option.series.data.value = ['335', '310', '274', '235', '400'];
          // option.series.data.name = ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'];
          option.series[0].data = [
            {value: 100, name: '已发问讯'},
            {value: 150, name: '超期件数'},
            {value: 274, name: '预警件数'},
            {value: 300, name: '办结办件'},
            {value: 340, name: '新增办件'}
          ],
            this.chart.setOption(option);
        }, 300);

      },
      refreshChart() {

      },
    },
    mounted() {
      console.log("mounted23");
      this.chart = echarts.init(document.getElementById('gov-pie'));
    }

  }
</script>

<style scoped lang="scss" type="text/scss">

  $gov-pie-list: url("../../assets/imgs/list-one.jpg");
  ul {
    padding: 0;
  }

  ul li {
    margin: 1px 0 0 5px;
    padding: 0 15px 0 20px;
    font-size: 14px;
    list-style-type: none;
    background: $gov-pie-list no-repeat 0px 8px;
    background-size: 10px 10px;

    span {
      padding: 0 20px 0 25px;
      color: #FBCC13;
      font-size: 20px;
      line-height: 20px;
      display: inline-block;
      width: 25px;
    }

    i {
      font-style: normal;
      font-size: 14px;
      vertical-align: bottom;
    }
  }
</style>
